<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
</head>
<body>
<h2>用户登录</h2>
<form id="loginForm">
<label for="username">用户名：</label>
<input type="text" id="username" maxlength="20">
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" maxlength="20">
<br><br>
<button type="button" id="clearButton">清空</button>
<button type="submit" id="loginButton">登录</button>
</form>
<script>
document.getElementById('clearButton').addEventListener('click', () => {
document.getElementById('username').value = '';
document.getElementById('password').value = '';
alert('内容已清空');
});
document.getElementById('loginForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
if (!username || !password) {
alert('用户名和密码不能为空！');
return;
}
if (username.length > 20 || password.length > 20) {
alert('用户名和密码长度不能超过 20 个字符！');
return;
}
const response = await fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
const result = await response.json();
if (result.success) {
window.location.href = '/success.html?timestamp=' + Date.now();
} else {
alert('用户名或者密码不正确');
}
});
</script>
</body>
</html>